<template>
  <Item />

</template>

<script>
  import {
    defineComponent,
    ref,
    reactive,
    watch,
    toRef,

  } from 'vue'
  import {useRoute} from 'vue-router'
  import {useStore, mapState, mapGetters, mapActions, mapMutations} from 'vuex'
  import Item from '../components/Item'

  export default  defineComponent({
    name: 'Todo',
    props: {
      id: String
    },

    setup(props, ctx){
      const route = useRoute()
      const store = useStore()

      const params = toRef(route, 'params')

      watch(route, (newVal, oldVal)=>{

      }, {immediate:true})

      store.dispatch('add', {x:0})


      return {
        params,
        ...mapState(['items']),
        ...mapActions(['add', 'remove'])
      }
    },


    components: {
      Item
    }
  })

</script>

<style scoped>

</style>
